<!-- 订单详情 orderDetail -->
<template>
  <div class="content">

    <div class="order-detail" v-loading="loading">
      <el-steps v-if="orderDetail.status !== 4" :active="steps" align-center finish-status='success' process-status="finish">
        <el-step title="创建订单" :description="step.createTime | glbTimeFormat"></el-step>
        <el-step title="买家付款" :description="step.paymentTime | glbTimeFormat"></el-step>
        <!-- <el-step :title="orderDetail.refundStatus !== 1 ? retundStatusStr(orderDetail.refundStatus) : '商家发货' " -->
        <el-step :title="stepThreeTitle" :description="step.deliveryTime | glbTimeFormat"></el-step>
        <el-step title="交易完成" :description="step.receiveTime | glbTimeFormat"></el-step>
        <el-button v-if="steps === 2 && orderDetail.refundStatus === 1" size="mini" class="send-goods" @click="handleSend">发货</el-button>
      </el-steps>

      <div class="order-content" v-if="orderDetail.status === 4">
        <h3>交易关闭</h3>
        <div class="content-list">
          <p>下单时间：{{orderDetail.createTime | glbTimeFormat}}</p>
          <!-- closedStatus (integer, optional): 关闭订单二级状态（1:手动取消订单 2:超时自动取消 3:退款关闭 4:退货退款关闭） , -->
          <p>关闭原因：{{orderInfo.closedStatus === 1? '买家手动取消订单': '' }}
            {{orderDetail.closedStatus === 2? '超时自动取消': '' }}
            {{orderDetail.closedStatus === 3? '退款关闭': '' }}
            {{orderDetail.closedStatus === 4? '退货退款关闭）': '' }}
          </p>
          <p>关闭时间：{{orderDetail.modifyTime | glbTimeFormat }}</p>
        </div>
      </div>
      <div class="order-content">
        <h3>订单信息</h3>
        <div class="content-list">
          <p class="order-sn">订单编号：{{orderInfo.orderSn}}</p>
          <div class="content-detail">
            <div>
              付款信息
              <p>付款人：{{ orderInfo.payMan }}</p>
              <p>实付金额：{{ orderInfo.payAmount }}</p>
              <p>实付积分：{{ orderInfo.payIntegration }}</p>
              <!-- 0->未支付；1->支付宝；2->微信 3->积分 , -->
              <p>付款方式：
                {{ orderInfo.payType === 0 ? '未支付' : '' }}
                {{ orderInfo.payType === 1 ? '支付宝' : '' }}
                {{ orderInfo.payType === 2 ? '微信' : '' }}
                {{ orderInfo.payType === 3 ? '积分' : '' }}
              </p>
              <p>付款时间：{{ orderInfo.paymentTime | glbTimeFormat}}</p>
            </div>

            <div>
              收货信息
              <p>收货人姓名：{{ orderInfo.receiverName }}</p>
              <p>收货人电话：{{ orderInfo.receiverPhone }}</p>
              <p>收货人地址：{{ orderInfo.address }}</p>
            </div>

            <div>
              其他信息
              <p>运费：{{orderInfo.freightAmount === 0 ? '包邮': orderInfo.freightAmount }}</p>
              <p>买家备注：{{orderInfo.note}}</p>
              <p>卖家备注：{{orderInfo.sallerNote}} <span class="click-ele" @click="handleOrderNote">修改备注</span></p>
            </div>

          </div>
        </div>
      </div>

      <div class="order-content">
        <h3>物流信息</h3>
        <template v-if="deliveries && deliveries.length > 0">
          <div style="padding: 0 20px;">
            <el-tabs v-model="deliveriesActive" @tab-click="onSelectPackage">
              <el-tab-pane :label="'包裹' + v.deliveryNo" :name="v.deliveryNo" v-for="(v, index) in deliveries" :key="index">
              </el-tab-pane>
            </el-tabs>
          </div>

          <div class="content-list">
            <p>物流公司：{{logisticsInfo.deliveryCompany}}</p>
            <p>物流单号：{{logisticsInfo.deliverySn}}</p>
            <!-- <p>物流配送时间：{{logisticsInfo.deliveryTime | glbTimeFormat}}</p> -->
            <div>配送详情：
              <span v-if="!logisticsInfo.deliveryDetail">暂无配送信息</span>
              <span v-if="!logisticsInfo.haveMessage">{{logisticsInfo.errorMsg}}</span>
              <span v-if="logisticsInfo.haveMessage">
                {{logisticsInfo.infoFirstList}}
                <span class="click-ele" @click="handleOpen">{{logisticsInfo.open ? "收起" :
                  "展开"}}</span>
              </span>
              <div v-if="logisticsInfo.open" style="padding-top: 20px;">
                <el-timeline>
                  <el-timeline-item v-for="(activity, index) in logisticsInfo.infoList" :key="index" :timestamp="activity.ftime">
                    {{activity.context}}
                  </el-timeline-item>
                </el-timeline>
              </div>
            </div>
            <div v-if="logisticsInfo && logisticsInfo.deliverySn && orderDetail.status !== 4">
              <span class="click-ele" style="margin-left: 0px;" @click="handleEditLogOrderInfo">修改物流</span>
            </div>
          </div>
        </template>
        <div v-else style="padding: 20px;color: rgb(96, 98, 102);"> 暂无物流信息 </div>

      </div>

      <div class="order-content">
        <h3>商品信息</h3>
        <div class="order-product content-list">
          <!-- row-style row-class-name-->
          <el-table class="order-detail-product" :data="tableList" ref="tableData" fit :row-style="hanldeRowStyle">
            <el-table-column prop="name" label="商品" align="center" min-width="150px">
              <template slot-scope="scope">
                <div class="product">
                  <div class="product-img">
                    <el-image class="product-img-small" fit="contain" :src="scope.row.productPic"></el-image>
                  </div>
                  <div class="product-word">
                    <span>{{scope.row.productName}}</span>
                  </div>
                </div>
              </template>
            </el-table-column>
            <el-table-column prop="orderSn" label="订单编号" align="center" min-width="120px"></el-table-column>
            <el-table-column prop="" label="商品规格" align="center">
              <template slot-scope="scope">
                <span>{{scope.row.sp1 ? scope.row.sp1:''}}{{scope.row.sp2 ? ',' + scope.row.sp2 : ''}}{{scope.row.sp3 ?
                  ',' + scope.row.sp3: ''}}</span>
              </template>
            </el-table-column>
            <el-table-column prop="productPrice" label="商品价格" align="center"></el-table-column>
            <el-table-column prop="realAmount" label="付款价格" align="center"></el-table-column>
            <el-table-column prop="productIntegration" label="积分价格" align="center"></el-table-column>
            <el-table-column prop="productQuantity" label="数量" align="center"></el-table-column>
            <el-table-column prop="productPrice" label="金额小计" align="center" min-width="110px">
              <template slot-scope="scope">
                <div>
                  金额：{{(scope.row.realAmount * scope.row.productQuantity) || 0}} <br />
                  积分：{{(scope.row.productIntegration * scope.row.productQuantity) || 0}}
                </div>
              </template>
            </el-table-column>
            <!-- <el-table-column prop="couponAmount" label="优惠" align="center"></el-table-column> -->
            <el-table-column prop="status" label="状态" align="center" min-width="100px">
              <template slot-scope="scope">
                <span v-if="scope.row.deliveryNo && scope.row.deliveryNo > 0">
                  <span>已发货</span>
                  <el-tooltip :content="'包裹' + scope.row.deliveryNo" placement="top">
                    <span style="margin: 0 5px;">{{scope.row.deliveryNo}}</span>
                  </el-tooltip>
                </span>
                <span v-else>待发货</span>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </div>
      <div class="order-contents">
        <p>商品总价：<span>￥{{priceInfo.totalAmount}}</span></p>
        <p>商品总积分：<span>{{priceInfo.payIntegration}}</span></p>
        <p>运费：<span>￥{{priceInfo.freightAmount}}</span></p>
        <p>优惠：<span>￥{{priceInfo.couponAmount}}</span></p>
        <!-- <p>积分抵扣金额：<span>￥{{priceInfo.integrationAmount}}</span></p> -->
        <p>改价：<span style="color:rgb(0, 128, 0);">￥{{priceInfo.discountAmount}}</span></p>
        <p>实付积分：<span style="color:#E6A23C;font-size: 24px">{{priceInfo.payIntegration}}</span></p>
        <p>实付金额：<span style="color: red;font-size: 24px">￥{{priceInfo.payAmount}}</span></p>
      </div>
    </div>

  </div>
</template>

<script>
import { GetOrderDetail, OrderNote } from '@/api/order'
import { ExportList, ExportStr } from '@/utils'
export default {
  name: 'orderDetail',
  components: {},
  data () {
    return {
      loading: false,
      orderStatusList: ExportList('orderStatusList'),
      steps: 1,
      step: {
        createTime: '',
        paymentTime: '',
        deliveryTime: '',
        receiveTime: ''
      },
      stepThreeTitle: '商家发货',
      orderId: '',
      orderDetail: {}, //
      orderInfo: {
        status: '',
        orderSn: '',
        freightAmount: '',
        receiverName: '',
        receiverPhone: '',
        receiverProvince: '',
        receiverCity: '',
        receiverRegion: '',
        receiverDetailAddress: '',
        totalAmount: '',
        payAmount: '',
        payIntegration: '',
        payMan: '',
        payType: '',
        paymentTime: '',
        note: '',
        sallerNote: ''
      }, //
      deliveries: [], // 多物流信息
      deliveriesActive: [], // 多物流信息-选中
      logisticsInfo: {
        deliveryCompany: '',
        deliverySn: '',
        deliveryTime: '',
        deliveryDetail: '', //  物流详细信息
        haveMessage: false, // 物流list = null 或者 length = 0
        errorMsg: '',
        infoList: [],
        infoFirstList: '',
        open: false
      }, // 物流信息

      priceInfo: {
        totalAmount: '',
        freightAmount: '',
        couponAmount: '',
        discountAmount: '',
        integrationAmount: '',
        payIntegration: '',
        payAmount: ''
      }, // 价格信息
      tableList: [], // 商品
      deliveryDialogVisible: false,
      deliveryDialogTitle: '',
      deliveryData: {}
    }
  },
  props: {},
  watch: {},
  computed: {},
  mounted () {
    this.orderId = this.$route.query.id
    this.getList()
  },
  methods: {
    getList () {
      this.loading = true
      GetOrderDetail(this.orderId).then(res => {
        this.loading = false
        const data = res.data
        this.deliveries = data.deliveries
        this.orderDetail = data.omsOrder
        this.orderDetail.address = data.omsOrder.receiverProvince + data.omsOrder.receiverCity + data.omsOrder.receiverRegion + ' ' + data.omsOrder.receiverDetailAddress
        this.orderInfo.address = this.orderDetail.address
        this.steps = this.orderDetail.status >= 3 ? 4 : this.orderDetail.status + 1
        this.orderInfo.payMan = data.memberName // 付款人

        for (const key in this.orderDetail) {
          if (this.step.hasOwnProperty(key)) {
            this.step[key] = this.orderDetail[key]
          }
          if (this.orderInfo.hasOwnProperty(key)) {
            this.orderInfo[key] = this.orderDetail[key]
          }
          if (this.priceInfo.hasOwnProperty(key)) {
            this.priceInfo[key] = this.orderDetail[key]
          }
        }

        this.retundStatusStr()

        // 物流信息处理
        this.deliveries = data.deliveries || []
        this.deliveries.forEach((v, index) => {
          v.deliveryNo = v.deliveryNo.toString()
        })
        if (this.deliveries && this.deliveries.length > 0) {
          this.handleLogisticsInfo(this.deliveries[0])
        }
        // 订单商品
        this.tableList = data.itemList
      }).catch(e => {
        this.loading = false
      })
    },
    // 选中物流包裹
    onSelectPackage (val) {
      const index = Number(val.index)
      const data = this.deliveries[index]
      this.handleLogisticsInfo(data)
    },
    hanldeRowStyle ({ row }) {
      const deliveryNo = row.deliveryNo ? row.deliveryNo.toString() : '0'
      if (deliveryNo === '0') {
        return {}
      } else if (deliveryNo === this.deliveriesActive) {
        return {
          background: 'rgb(255, 202, 102)'
        }
      } else {
        return {
          background: 'rgb(244, 244, 245)'
        }
      }
    },
    // 发货
    handleSend () {
      this.$router.push({ name: 'pms:order:delivery', query: { id: this.orderId } })
    },
    // 修改物流订单信息
    handleEditLogOrderInfo () {
      this.$router.push({ name: 'pms:order:delivery', query: { id: this.orderId, pnum: this.deliveriesActive } })
    },
    // 修改卖家备注
    handleOrderNote (sallerNote) {
      let sallerNoteStr = this.orderInfo.sallerNote || ''
      this.$prompt('请输入备注', '', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        inputType: 'textarea',
        inputPlaceholder: '备注不得超过100字',
        inputPattern: /^[\s\S]{0,100}$/,
        inputErrorMessage: '备注不得超过100字',
        inputValue: sallerNoteStr
      }).then(({ value }) => {
        let params = {
          orderId: this.orderDetail.id,
          sallerNote: value
        }
        OrderNote(params).then(res => {
          this.getList()
        }).catch(e => { })
      }).catch(() => {
      })
    },
    dealListStr (key, type) {
      return ExportStr(key, type)
    },

    // 处理配送信息
    handleLogisticsInfo (data) {
      this.deliveriesActive = data.deliveryNo
      this.logisticsInfo.deliveryCompany = data.deliveryCompany
      this.logisticsInfo.deliverySn = data.deliverySn
      // 物流信息处理
      if (data.deliveryDetail) {
        this.logisticsInfo.deliveryDetail = JSON.parse(data.deliveryDetail)
        const detail = this.logisticsInfo.deliveryDetail.data || null
        if (detail && detail.length >= 1) {
          this.logisticsInfo.haveMessage = true
          this.logisticsInfo.infoList = detail
          this.logisticsInfo.infoFirstList = detail[0].context
        } else {
          this.logisticsInfo.haveMessage = false
          this.logisticsInfo.errorMsg = this.logisticsInfo.deliveryDetail.message
          this.logisticsInfo.infoFirstList = ''
        }
      } else {
        this.logisticsInfo.deliveryDetail = null
        this.logisticsInfo.haveMessage = false
      }
    },

    // 打开具体配送信息
    handleOpen () {
      this.logisticsInfo.open = !this.logisticsInfo.open
    },

    retundStatusStr () {
      const key = this.orderDetail.refundStatus || ''
      const status = {
        1: '正常',
        2: '申请退款',
        4: '申请退货退款',
        5: '退款完成',
        6: '退货中',
        7: '退货退款完成',
        8: '退货待填物流',
        9: '退货退款失败）'
      }
      if (key !== 1) {
        this.stepThreeTitle = `${status[key]}`
      }
    },
    getOprResult (val) {
      if (val) {
        this.getList()
      }
    }
  }
}

</script>
<style lang='scss' scoped>
$Border: 1px solid rgb(232, 232, 232);
.order-detail {
  .el-steps {
    position: relative;
    .send-goods {
      position: absolute;
      left: 60%;
      bottom: -10px;
    }
  }

  width: 100%;
  padding: 20px;
  overflow: hidden;
  box-sizing: border-box;
  .order-contents {
    margin: 20px 40px;
    text-align: right;
    line-height: 30px;
    span {
      display: inline-block;
      width: 80px;
    }
  }
  .order-content {
    border: $Border;
    border-radius: 3px;
    box-sizing: border-box;
    margin: 20px 40px;
    h3 {
      font-size: 20px;
      font-weight: bold;
      padding: 10px;
      height: 36px;
      line-height: 36px;
      border-bottom: $Border;
    }
    .content-list {
      padding: 0 20px 20px;
      box-sizing: border-box;
      div,
      p {
        line-height: 30px;
        color: rgb(96, 98, 102);
      }
    }
    .order-product {
      padding-top: 20px;
      .success-row {
        background: #f0f9eb;
      }
      .fail-row {
        background: grey;
      }
    }
    .order-sn {
      border-bottom: 1px dashed rgb(232, 232, 232);
    }
    .content-detail {
      display: flex;
      justify-content: space-between;
      padding: 20px 0 0;
      div {
        width: 33%;
        font-size: 16px;
        font-weight: bold;
        p {
          font-size: 14px;
          font-weight: normal;
          overflow: hidden;
          word-break: break-all;
        }
      }
    }
  }
}
</style>
